<script>
export default {
  name: "lemonMessageText",
  inheritAttrs: false,
  inject: ["IMUI"],
  render() {
    return (
      <lemon-message-basic
        class="lemon-message-text"
        props={{ ...this.$attrs }}
        scopedSlots={{ 
          content: props => {
            const content = this.IMUI.emojiNameToImage(props.content);
            const isQuote = props.extends && props.extends.content;
            return (
              <div>
                <span domProps={{ innerHTML: content }} />
                {isQuote ? 
                <div class="message-quote">
                  <span>{props.extends.content}</span>
                </div>
                : ''
              }
              </div>
            );
          }
        }}
      />
    );
  }
};
</script>
<style lang="scss" scoped>
.lemon-message-text{
  .lemon-message{
    .content{
      img{
        width:18px;
        height:18px;
        display:inline-block;
        background:transparent;
        position:relative;
        top:-1px;
        padding:0 2px;
        vertical-align:middle;
      }
    }
  }
}
.message-quote{
	padding:3px 5px;
	font-size:12px;
	margin-top:10px;
	background-color: #ffffff;
	overflow: hidden !important;
	text-overflow: ellipsis;
	white-space: nowrap !important;
	max-width:240px;
  border-radius:4px;
  border-left:solid #999 4px;
}
</style>
